<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="css/youdao.css">
</head>
<body>
  <div id="mainDiv">
      <!--菜单-->
      <div id="menuDiv">
        <div id="logoDiv">
          <div id="logo_title_Div">
            <div style="font-size: 20px;font-weight: bold">有道云笔记</div>
            <div style="font-size: 10px;">note.youdao.com</div>
          </div>
        </div>
        <div id="ulDiv">
          <ul id="menuUL">
            <li>首页</li>
            <li>多平台下载</li>
            <li>视频介绍</li>
            <li>开放平台</li>
            <li>官方论坛</li>
          </ul>
        </div>
        <div id="linkDiv">
          <a href="#">登陆网页版</a> | <a href="#">注册</a>
        </div>
      </div>
      <!--图片-->
      <div id="imgDiv"></div>
      <!--正文-->
      <div id="contentDiv">
        <div id="content_left_div">
          <div class="clheight climage" style="background-image: url('img/icon_1[1].png')"></div>
          <div class="clheight climage" style="background-image: url('img/icon_2[1].png')"></div>
          <div class="clheight climage" style="background-image: url('img/icon_3[1].png')"></div>
        </div>
        <div id="content_center_div">
          <div class="clheight">
            <h1>随心所欲  随时记录</h1>
            <p>文字、手写、录音、拍照多种记录方式</p>
            <p>文字、手写、录音、拍照多种记录方式</p>
            <p>文字、手写、录音、拍照多种记录方式</p>
          </div>
          <div class="clheight">
            <h1>随心所欲  随时记录</h1>
            <p>文字、手写、录音、拍照多种记录方式</p>
            <p>文字、手写、录音、拍照多种记录方式</p>
            <p>文字、手写、录音、拍照多种记录方式</p>
          </div>
          <div class="clheight">
            <h1>随心所欲  随时记录</h1>
            <p>文字、手写、录音、拍照多种记录方式</p>
            <p>文字、手写、录音、拍照多种记录方式</p>
            <p>文字、手写、录音、拍照多种记录方式</p>
          </div>
        </div>
        <div id="content_right_div">
          <div id="c_r_oneDiv"></div>
          <div id="c_r_twoDiv"></div>
          <div id="c_r_threeDiv">
            <div class="rtitle">获奖展示</div>
            <div style="display: flex;padding-top: 10px">
              <div class="subjectDiv">
                <img src="img/award_2%5B1%5D.png"><br>
                360软件管家<br>装机必备
              </div>
              <div class="subjectDiv">
                <img src="img/award_1%5B1%5D.png"><br>
                App Store<br>员工最爱
              </div>
              <div class="subjectDiv">
                <img src="img/award_4%5B1%5D.png"><br>
                联通WO+<br>创新应用奖
              </div>
            </div>
          </div>
          <div id="c_r_fourDiv">
            <div class="rtitle">产品动态
              <a id="knowMore" href="#">了解更多>></a>
            </div>
            <ul>
              <li>iphone3.4.5，新增百度输入法 </li>
              <li>iphone3.4.5，新增百度输入法 </li>
              <li>iphone3.4.5，新增百度输入法 </li>
              <li>iphone3.4.5，新增百度输入法 </li>
            </ul>
          </div>
        </div>
      </div>
      <!--页脚-->
      <div id="footDiv">
        <div>
          <ul>
            <li>关于有道</li>
            <li>官方博客</li>
            <li>服务条款</li>
            <li>隐私协议</li>
          </ul>
        </div>
        <div>
          <ul>
            <li>关于有道</li>
            <li>官方博客</li>
            <li>服务条款</li>
            <li>隐私协议</li>
          </ul>
        </div>
        <div>
          <ul>
            <li>关于有道</li>
            <li>官方博客</li>
            <li>服务条款</li>
            <li>隐私协议</li>
          </ul>
        </div>
        <div>
          <ul>
            <li>关于有道</li>
            <li>官方博客</li>
            <li>服务条款</li>
            <li>隐私协议</li>
          </ul>
        </div>
      </div>
  </div>
</body>
</html>
